import React from 'react';
import { Menu } from 'antd';
import { WeaInputSearch,WeaLocaleProvider } from 'ecCom';
import { observer } from 'mobx-react';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TaskTypeList extends React.Component {
    render() {
        const { store, params } = this.props;
        return (
            <div className="edc-task-left">
                <div className="search-wrapper">
                    <span onClick={this.clickAll} className="search-all" title={getLabel(21979,'全部类型')}>{getLabel(21979,'全部类型')}</span>
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@2x5qz1`} onSearch={this.onSearch} onChange={this.onSearch} />
                </div>
                <div className="list-wrapper">
                    <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@v7e66a`}
                        onClick={this.onClick}
                        selectedKeys={store.selectedApp ? [store.selectedApp] : []}
                    >
                        {store.apps.map(menu => (
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@3gjpzq@${menu.appid}`} key={menu.appid} className="no-line-height">
                                <div className="main" title={menu.name}>
                                    {menu.name}
                                    <div className="right" title={getLabel('511007','待处理/已办')}>
                                        <span className="doing">{menu.doingCount}</span>
                                        <span>/</span>
                                        <span className="done">{menu.doneCount}</span>
                                    </div>
                                </div>
                                <div className="desc">
                                    <span>{menu.creator}</span>
                                    <span>{menu.createDate}</span>
                                    <span>{menu.createTime}</span>
                                </div>
                            </Menu.Item>
                        ))}
                    </Menu>
                </div>
            </div>
        )
    }
    onSearch = (searchValue) => {
        const { store } = this.props;
        store.setLeftSearchValue(searchValue);
    }
    onClick = (menu) => {
        const { store } = this.props;
        store.changeSelectedApp(menu.key);
    }
    clickAll = () => {
        this.onClick({ key: '' });
    }
}